<!DOCTYPE html>
<html>
<head>
	<title>我的推广</title>
	<meta charset="utf-8">
    <link href="css/mui.min.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="js/swiper/swiper.min.css" />
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>
	<style type="text/css">
		  
	        *{margin:0;padding:0;font-family: "微软雅黑";}
				.wrap{margin:0 auto;}
				.tabs{height:32px;background: #5AA9F3;width: 100%;padding-top: 8px;text-align: center}
				.tabs .part{display:block;float:left;width:49.5%;color:#fff;text-align:center;height: 20px;}
				.tabs .part:first-child{border-right: 1px solid #ADDAFD;}
				.tabs a{width:70px;display:block;color:#fff;text-align:center;margin:0 auto;font-size:16px;text-decoration:none;padding-bottom: 2px;}
				.tabs span.active a{color:#fff;border-bottom: 2px solid #fff;}
				.swiper-container{width:100%;border-top:0;margin-top:10px!important}
				.swiper-slide{width:100%;background:none;color:#373737;}
				p{text-align: center;}
				.shop{height: 120px;border: 0.5px solid #d0d0d0}
				.shop a{text-decoration: none;}
				.weui-grids {position: relative;overflow: hidden;}
			    .weui-grid{
			        position: relative;
			        float: left;
			        padding: 20px 10px;
			        width:50%;
			        box-sizing: border-box;}
				.weui-grid2{
		            height:180px;
		            position: relative;
		            float: left;
		            padding: 20px 10px;
		            width:50%;
		            box-sizing: border-box;}
		        .weui-grid__icon1 {
		            width: 160px;
		            height: 120px;
		            margin: 0 auto;}
		        .weui-grid__label1 {
		            display: block;
		            text-align: center;
		            color: #000000;
		            font-size: 20px;
		            white-space: nowrap;
		            text-overflow: ellipsis;
		            overflow: hidden;
		            float: left;
		           } 
		           .weui-grid__label2 {
		            display: block;
		            text-align: center;
		            color: #000000;
		            font-size: 20px;
		            white-space: nowrap;
		            text-overflow: ellipsis;
		            overflow: hidden;
		            float: right;
		           }
	</style>
	
</head>
<body class="bgc_gray">
<!-- 选项卡部分 -->
<div class="pg-main">
			<div id="wrapper">
				<!--header end-->
				<div class="wrap">
					<div class="tabs">
						<span class="part active"><a href="#" hidefocus="true" >猜你喜欢</a></span>
						<span class="part"><a href="#" hidefocus="true">我的签约</a></span>
					
					</div>

					<div class="swiper-container">
						<div class="swiper-wrapper" style="margin-top: 100px">
							<div class="swiper-slide swiper-slide-visible swiper-slide-active">
									<div class="content-slide">
		                             已经消失风雨里
									</div>
					      </div>
					      <div class="swiper-slide">
									<div class="content-slide">
						                一场雨把握留在这里
									</div>
					      </div>

						</div>
					</div>
		</div>
		</div>
		</div>
		<script type="text/javascript">
			$(function() {
	
		var tabsSwiper;
		tabsSwiper = new Swiper('.swiper-container', {
			speed : 500,
			onSlideChangeStart : function() {
				$(".tabs .active").removeClass('active');
				
			}
		});
	
		$(".tabs span").on('touchstart mousedown', function(e) {
			e.preventDefault()
			$(".tabs .active").removeClass('active');
			$(this).addClass('active');
			tabsSwiper.swipeTo($(this).index());
	
		});
	
		$(".tabs span").click(function(e) {
			e.preventDefault();
		});
	
	
	});//end
		</script>
</body>
</html>
